{extend name="public:base" /}

{block name="title"}<title>{$Think.lang.v_title}</title>{/block}

{block name="pjax_container"}
<style type="text/css">
    .stats .stat-icon {
        color: #28bb9c;
        display: inline-block;
        font-size: 26px;
        text-align: center;
        vertical-align: middle;
        width: 50px;
        float: left;
        margin-bottom: 5px;
    }
    .stat {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        margin-right: 10px;
    }
    .stat .value {
        font-size: 20px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }
    .stat .name {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .stat-col .progress {
        height: 2px;
    }
    .stat-col .progress-bar {
        line-height: 2px;
        height: 2px;
    }
    .bg-white{
        background-color: white;
        padding-top: 10px;
    }
</style>
<section class="content-header">
    <h1>{$Think.lang.v_title}</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <div class="small-box bg-red">
                <div class="inner"><h3>{$data.today_amount}</h3><p>{$Think.lang.today_amount}</p></div>
                <div class="icon"><i class="fa fa-cny"></i></div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <div class="small-box bg-yellow">
                <div class="inner"><h3>{$data.today_order_num}</h3><p>{$Think.lang.today_order_num}</p></div>
                <div class="icon"><i class="fa fa-shopping-cart"></i></div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <div class="small-box bg-blue">
                <div class="inner"><h3>{$data.total_amount}</h3><p>{$Think.lang.total_amount}</p></div>
                <div class="icon"><i class="fa fa-cny"></i></div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <div class="small-box bg-green">
                <div class="inner"><h3>{$data.total_order_num}</h3><p>{$Think.lang.total_order_num}</p></div>
                <div class="icon"><i class="fa fa-shopping-cart"></i></div>
            </div>
        </div>
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">{$Think.lang.v_title}</h3>
                </div>
                <div class="box-body">
                    <canvas id="orders-line" height="312"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="card sameheight-item stats">
                <div class="card-block">
                    <div class="row row-sm stats-container">
                        <div class="col-xs-6 stat-col bg-white">
                            <div class="stat-icon"> <i class="fa fa-cny"></i> </div>
                            <div class="stat">
                                <div class="value"> {$data.7_days_amount} </div>
                                <div class="name"> {$Think.lang.7_days_amount} </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 30%"></div>
                            </div>
                        </div>
                        <div class="col-xs-6 stat-col bg-white">
                            <div class="stat-icon"> <i class="fa fa-shopping-cart"></i> </div>
                            <div class="stat">
                                <div class="value"> {$data.7_days_order_num} </div>
                                <div class="name"> {$Think.lang.7_days_order_num} </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 30%"></div>
                            </div>
                        </div>
                        <div class="col-xs-6 stat-col bg-white">
                            <div class="stat-icon"> <i class="fa fa-gavel"></i> </div>
                            <div class="stat">
                                <div class="value"> {$data.14_days_amount} </div>
                                <div class="name"> {$Think.lang.14_days_amount} </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 30%"></div>
                            </div>
                        </div>
                        <div class="col-xs-6 stat-col bg-white">
                            <div class="stat-icon"> <i class="fa fa-shopping-bag"></i> </div>
                            <div class="stat">
                                <div class="value"> {$data.14_days_order_num} </div>
                                <div class="name"> {$Think.lang.14_days_order_num} </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 30%"></div>
                            </div>
                        </div>
                        <div class="col-xs-6 stat-col bg-white">
                            <div class="stat-icon"> <i class="fa fa-calendar"></i> </div>
                            <div class="stat">
                                <div class="value"> {$data.30_days_amount} </div>
                                <div class="name"> {$Think.lang.30_days_amount} </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 30%"></div>
                            </div>
                        </div>
                        <div class="col-xs-6 stat-col bg-white">
                            <div class="stat-icon"> <i class="fa fa-line-chart"></i> </div>
                            <div class="stat">
                                <div class="value"> {$data.30_days_order_num} </div>
                                <div class="name"> {$Think.lang.30_days_order_num} </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" style="width: 30%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    $(function () {
        var data = {$data.order_line};
        var orderline = document.getElementById('orders-line').getContext('2d');
        new Chart(orderline, {
            type: 'line',
            data: data,
            options: {
                responsive: true,
                maintainAspectRatio: false
            }
        });
    });
</script>
{/block}